@extends('layouts.application')

@section('css')
    <link rel="stylesheet" href="/vendor/webupload/dist/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="/vendor/webupload/style.css" />
@endsection
@section('content')
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">新增商品</strong> /
                <small>Create A New Product</small>
            </div>
        </div>

        @include('layouts._flash')

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-12">

                <form class="am-form" action="{{route('products.store')}}" method="post">
                    {!! csrf_field() !!}


                    <div data-am-widget="tabs" class="am-tabs am-tabs-default">
                        <ul class="am-tabs-nav am-cf" style="width:300px;">
                            <li class="am-active"><a href="[data-tab-panel-0]">通用信息</a></li>
                            <li><a href="[data-tab-panel-1]">商品介绍</a></li>
                            <li><a href="[data-tab-panel-2]">商品相册</a></li>
                        </ul>

                        <div class="am-tabs-bd">
                            <div data-tab-panel-0 class="am-tab-panel am-active">
                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        所属栏目
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end am-form-group">

                                        <select multiple data-am-selected="{btnWidth: '100%',  btnStyle: 'secondary', btnSize: 'sm', maxHeight: 360, searchBox: 1}"
                                                name="category_id[]">

                                            @foreach ($categories as $category)
                                                <optgroup label="{{$category->name}}">
                                                    @foreach ($category->children as $c)
                                                        <option value="{{$c->id}}">
                                                            {{$c->name}}
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        商品名称
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4">
                                        <input type="text" class="am-input-sm" name="name" value="">
                                    </div>
                                    <div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        URL网址
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4">
                                        <input type="text" class="am-input-sm" name="url" value="">
                                    </div>
                                    <div class="am-hide-sm-only am-u-md-6">*必填</div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        单价
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                        <input type="text" class="am-input-sm" name="unit_price" value="">
                                    </div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        商品品牌
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                        <select data-am-selected="{btnWidth: '100%',  btnStyle: 'secondary', btnSize: 'sm', maxHeight: 360, searchBox: 1}"
                                                name="brand_id">
                                            <option value="">
                                                请选择
                                            </option>
                                            @foreach ($brands as $brand)
                                                <option value="{{ $brand->id }}">
                                                    {{ $brand->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        库存
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                        <input type="text" class="am-input-sm" name="stock"
                                               value="">
                                    </div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        缩略图
                                    </div>

                                    <div class="am-u-sm-8 am-u-md-8 am-u-end col-end">
                                        <div class="am-form-group am-form-file new_thumb">
                                            <button type="button" class="am-btn am-btn-secondary am-btn-sm">
                                                <i class="am-icon-cloud-upload" id="loading"></i> 上传新的缩略图
                                            </button>
                                            <input type="file" id="thumb_upload">
                                        </div>

                                        <div class="select_thumb">
                                            <button type="button" class="am-btn am-btn-success am-btn-sm"
                                                    id="ck_thumb_upload">
                                                <i class="am-icon-search-plus"></i> 选择已存在的缩略图
                                            </button>
                                            <input type="hidden" name="thumb" value="">
                                        </div>

                                        <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>

                                        <div>
                                            <img src="" id="img_show" style="max-height: 100px;">
                                        </div>
                                    </div>
                                </div>

                                <div class="am-g am-margin-top sort">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        描述信息
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                        <textarea rows="4" name="desc"></textarea>
                                    </div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        上架
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                        <label class="am-radio-inline">
                                            <input type="radio" value="1" name="is_onsale" checked> 是
                                        </label>
                                        <label class="am-radio-inline">
                                            <input type="radio" value="0" name="is_onsale"> 否
                                        </label>
                                    </div>
                                </div>

                                <div class="am-g am-margin-top">
                                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                        加入推荐
                                    </div>
                                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                        <input type="hidden" name="is_top" value="0">
                                        <input type="hidden" name="is_recommend" value="0">
                                        <input type="hidden" name="is_hot" value="0">
                                        <input type="hidden" name="is_new" value="0">

                                        <div class="am-btn-group" data-am-button="">
                                            <label class="am-btn am-btn-default am-btn-xs am-round ">
                                                <input type="checkbox" name="is_top" value="1"> 置顶
                                            </label>
                                            <label class="am-btn am-btn-default am-btn-xs am-round ">
                                                <input type="checkbox" name="is_recommend" value="1"> 推荐
                                            </label>
                                            <label class="am-btn am-btn-default am-btn-xs am-round ">
                                                <input type="checkbox" name="is_hot" value="1"> 热销
                                            </label>
                                            <label class="am-btn am-btn-default am-btn-xs am-round ">
                                                <input type="checkbox" name="is_new" value="1"> 新品
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div data-tab-panel-1 class="am-tab-panel ">
                                <script id="editor" type="text/plain" name="content" style="width:1024px;height:500px;">
                                </script>
                            </div>

                            <div data-tab-panel-2 class="am-tab-panel ">
                                <div id="uploader">
                                    <div class="queueList">
                                        <div id="dndArea" class="placeholder">
                                            <div id="filePicker"></div>
                                            <p>或将照片拖到这里，单次最多可选300张</p>
                                        </div>
                                    </div>
                                    <div class="statusBar" style="display:none;">
                                        <div class="progress">
                                            <span class="text">0%</span>
                                            <span class="percentage"></span>
                                        </div>
                                        <div class="info"></div>
                                        <div class="btns">
                                            <div id="filePicker2"></div>
                                            <div class="uploadBtn">开始上传</div>
                                        </div>
                                    </div>
                                    <div id="imgs">
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="am-margin">
                        <button type="submit" class="am-btn am-btn-primary am-radius">提交保存</button>
                        <button type="reset" class="am-btn am-btn-primary am-btn-primary">重新填写</button>
                    </div>
            </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="/vendor/jquery.html5-fileupload.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" charset="utf-8" src="/vendor/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/vendor/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/vendor/ueditor/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript" src="/vendor/webupload/dist/webuploader.js"></script>
    <script type="text/javascript" src="/vendor/webupload/upload.js"></script>

    <script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
    </script>

    <script>
        //文件上传
        var opts = {
            url: "/lxSystem/upload",
            type: "POST",
            beforeSend: function () {
                $("#loading").attr("class", "am-icon-spinner am-icon-pulse");
            },
            success: function (result, status, xhr) {
                if (result.status == "0") {
                    alert(result.info);
                    $("#loading").attr("class", "am-icon-cloud-upload");
                    return false;
                }

                var url = 'http://od9xcrkaj.bkt.clouddn.com/' + result.info;
                $("input[name='thumb']").val(url);
                $("#img_show").attr('src', url);
                $("#loading").attr("class", "am-icon-cloud-upload");
            },
            error: function (result, status, errorThrown) {
                alert('文件上传失败');
            }
        };
        $('#thumb_upload').fileUpload(opts);
    </script>
@endsection